<template>
	<view class="select-items">
		<popup ref="popRef" :isStopMaskHide="false" type="bottom">
			<view class="selectpop-panel flex-col">
				<scroll-view scroll-y="true" class="scroll">
					<view class="s-item align-center" v-for="(item,i) in list" :key="i"
					  @click.stop="select(item)"
					>
						<image :src="includeItem(checked,item.id) ? '/static/radio-checked.png' : '/static/radio-checkun.png'" mode="aspectFill" class="ic"></image>
						<text class="txt">{{item.name || item.shortname}}</text>
					</view>
				</scroll-view>
				<view class="btn" @tap="confirmReply">确定</view>
			</view>
		</popup>
	</view>
</template>

<script lang="ts">
import {
	defineComponent,
	watchEffect,
	reactive,
	toRefs,
	// computed
	watch,
	// nextTick,
	ref,
} from 'vue';
// import { onReachBottom,onLoad } from "@dcloudio/uni-app";
const selectItems = defineComponent({
	props: {
		list: {
			type: Object,
			default: () => ([])
		},
		type:{
			type: [String,Number],
			default: 1
		},
		checked:{
			type: Array,
			default: ()=>([])
		}
	},
	setup(props: any, ctx: any) {
		const data: any = reactive({
			list: {},
			type:1, //1 单，2多
			checked:[],
			
		});
		watchEffect(() => {
			data.list = props.list;
			data.type = props.type;
			// watchEffect 对于内部任何变量都触发，data.checked，props.checked；
			// data.checked = props.checked;  不可使用，变化后又赋值到原始了
			// console.log("props, data.checked",data.checked,data.checked.length)
			// console.log("props, data.list",data.list)
			// console.log("props, data.type",data.type)
		});
		watch(()=>props.checked,(v,o)=>{
			// console.log('watch===',v,o)
			data.checked =  v;
		},{immediate:true})
        const popRef = ref();
		const showPop = () => {
			//checked 初始弹起时父会传空{}
			popRef.value.show();
		};
		//判断是否包括
		const includeItem=(arr,id)=>{
			return arr.some(a=> a.id === id);
		}
		//点击选择
		const select = (item)=>{
			// data.checked = [];
			// console.log("select item===",item)
			data.checked=[];
			data.checked.push({id:item.id,name: item.name || item.shortname});
			// console.log("---",data.checked,item.id,includeItem(data.checked,item.id));
		}
		const confirmReply = ()=>{
			// console.log("confirmReply===",data.checked,data.checked.length)
			//data.checked 初始默认值[{}],弹起时父组件传
			if(data.checked.length === 0){
				uni.$tools.msg('请选择')
				return;
			}
			ctx.emit("confirm",data.checked)
			popRef.value.hide();
		}
		return {
			...toRefs(data),
			popRef,
			showPop,
			select,
			includeItem,
			confirmReply,
		};
	}
});
export default selectItems;
</script>

<style lang="scss" scoped>
.selectpop-panel{
	padding: 10rpx 30rpx;
	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	background-color: #fff;
	border-radius: 30rpx 30rpx 0 0;
	.scroll{
		width: 100%;
		min-height: 30vh;
		max-height: 70vh;
		.s-item{
			border-bottom: 2rpx solid #eee;
			height: 80rpx;
			&:last-child{
				border: none;
			}
			.ic{
				width: 28rpx;
				height: 28rpx;
				margin-right: 10rpx;
			}
			.txt{
				font-size: 28rpx;
				color:#333;
			}
		}
	}
	.btn{
		margin: 10rpx auto 0;
		width: 670rpx;
		height: 84rpx;
		background: #256ae5;
		border-radius: 84rpx;
		line-height: 84rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		&.disabled {
			background-color: #eee;
		}
	}
}

</style>
